<template>
  <div>
    <el-tag
      :key="tag.label"
      v-for="tag in tags"
      :closable="tag.name === 'home' ? false: true"
      :disable-transitions="false"
      @close="handleClose(tag)"
      @click="goToPage(tag)"
      :effect="tag.path === $route.path ? 'dark' : 'plain'"
    >{{tag.label}}</el-tag>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: '',
  data () {
    return {};
  },
  methods: {
    // 关闭标签页
    handleClose (tag) {
      if (tag.path === this.$route.path) {
        this.$router.replace('/')
        this.$store.commit('selectMenu', {
          path: '/',
          name: 'home',
          label: '首页',
          icon: 's-home',
        })
      }
      this.$store.dispatch('closeTag', tag)
    },

    // 点击标签页跳转
    goToPage (tag) {
      this.$store.commit('selectMenu', tag)
      this.$router.push(tag.path)
    }
  },
  computed: {
    ...mapState({
      tags: state => state.tabs.tagList
    })
  },
}

</script>
<style lang='less' scoped>
.el-tag {
  margin: 0 0 10px 10px;
}
</style>